<template>
  <div class="from-box">
    <van-form validate-first @failed="onFailed">
      <!-- 通过 validator 进行异步函数校验 -->
      <van-field
        v-model="phone"
        placeholder="手机号"
        :rules="[{ validator: asyncValidator, message: '请输入正确的手机号' }]"
      />
      <!-- 通过 validator 进行函数校验 -->
      <van-field
        v-model="userpass"
        type="password"
        placeholder="原密码"
        :rules="[{ validator: validator, message: '请输入密码' }]"
      />

      <div style="margin: 16px">
        <van-button
          round
          block
          type="default"
          native-type="submit"
          @click="onSubmit"
          >下一步</van-button
        >
      </div>
    </van-form>
  </div>
</template>




<script>
import { Toast } from "vant";
import { mapActions } from "vuex";

export default {
  data() {
    return {
      hardText: "登录",
      phone: "",
      userpass: "",
      isDisabled: true,
    };
  },
  methods: {
    ...mapActions(["userStore/loginAtion"]),
    onClickLeft() {
      // console.log("aaaa");
      Toast("没有上一个了");
    },
    onClickRight() {
      Toast("按钮");
    },
    // 校验函数返回 true 表示校验通过，false 表示不通过

    //手机号验证规则
    asyncValidator(val) {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(
            /^(((13[0-9])|(14[5-7])|(15[0-9])|(17[0-9])|(18[0-9]))+\d{8})$/.test(
              val
            )
          );
        }, 10);
      });
    },
    //输入密码验证
    validator(val) {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(/^[0-9a-zA-Z]{6,16}$/.test(val));
        }, 10);
        this.isDisabled = false;
      });
    },

    onSubmit() {
      // console.log("submit", this.phone, this.userpass);
      this.$http({
        url: "/driver/isExist",
        method: "POST",
        params: {
          phone:this.phone,
          pwd:this.userpass
        },
      })
        .then((res) => {
          // console.log("请求成功", res.data);
          if (res.data.code == 1) {
            // console.log("查询到该用户");
            this.$router.push({
              path: "/new/password",
              query: {
                hardText: "修改密码",
                phone:this.phone,
              },
            });
          } else {
            Toast("请检查手机号或密码是否正确")
          }
        })
        .catch((err) => {
            Toast("网络连接超时")
          // console.log("请求失败", err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.from-box {
  margin-top: 20px;
}
</style>